<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>股票看板</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            padding: 20px;
            overflow-x: auto;
            min-width: 1600px;
        }
        
        .container {
            width: 100%;
            max-width: none;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #ddd;
            width: 100%;
        }
        
        .main-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }
        
        .total-position {
            font-size: 16px;
            color: #ff4d4f;
            font-weight: bold;
        }
        
        .modules-container {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
            flex-wrap: nowrap;
            width: 100%;
        }
        
        .module {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 15px;
            display: flex;
            flex-direction: column;
            min-width: 280px;
            flex-shrink: 0;
        }
        
        .module-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .module-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
        
        .module-filter {
            font-size: 12px;
            color: #666;
        }
        
        .table-container {
            flex: 1;
            overflow-x: auto;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th, td {
            padding: 8px 6px;
            text-align: center;
            border-bottom: 1px solid #eee;
            font-size: 12px;
        }
        
        th {
            background-color: #f0f0f0;
            font-weight: bold;
            color: #333;
        }
        
        tr:hover {
            background-color: #f9f9f9;
        }
        
        .stock-code {
            color: #1890ff;
        }
        
        .stock-name {
            color: #333;
        }
        
        .stock-rise {
            color: #ff4d4f;
            font-weight: bold;
        }
        
        .stock-fall {
            color: #52c41a;
            font-weight: bold;
        }
        
        .theme-name {
            color: #722ed1;
        }
        
        .sector-table {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 15px;
            width: 100%;
        }
        
        .sector-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .sector-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
        
        .add-btn {
            background-color: #1890ff;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .action-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
        
        .download-btn {
            background-color: #52c41a;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .stock-item {
            cursor: pointer;
        }
        
        .stock-item:hover {
            background-color: #f0f7ff;
        }
        
        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }
        
        /* 电力-核电表格特殊样式 */
        .power-nuclear-table-container {
            display: flex;
            overflow: hidden;
        }
        
        .power-nuclear-fixed-columns {
            flex-shrink: 0;
            width: 300px; /* 固定列的宽度 */
        }
        
        .power-nuclear-scrollable-dates {
            flex: 1;
            overflow-x: auto;
        }
        
        .power-nuclear-scrollable-dates table {
            min-width: 800px; /* 确保日期列足够宽以产生滚动 */
        }
        
        .power-nuclear-fixed-columns th,
        .power-nuclear-fixed-columns td {
            width: 100px; /* 固定列宽度 */
        }
        
        .power-nuclear-scrollable-dates th,
        .power-nuclear-scrollable-dates td {
            width: 80px; /* 日期列宽度 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="main-title">股票看板</div>
            <div class="total-position">机会序列总仓位：100万</div>
        </div>
        
        <!-- 六个主要模块横向排列 -->
        <div class="modules-container">
            <!-- 股票涨跌榜 -->
            <div class="module">
                <div class="module-header">
                    <div class="module-title">股票涨跌榜</div>
                    <div class="module-filter">涨幅↑↓</div>
                </div>
                <div class="table-container">
                    <table id="rise-fall-table">
                        <thead>
                            <tr>
                                <th>股票</th>
                                <th>题材</th>
                                <th>涨幅</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 数据将通过AJAX动态加载 -->
                            <tr>
                                <td colspan="3" class="loading">正在加载数据...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 股票涨速榜 -->
            <div class="module">
                <div class="module-header">
                    <div class="module-title">股票涨速榜</div>
                    <div class="module-filter">涨速↑↓</div>
                </div>
                <div class="table-container">
                    <table id="rise-speed-table">
                        <thead>
                            <tr>
                                <th>股票</th>
                                <th>题材</th>
                                <th>涨幅</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 数据将通过AJAX动态加载 -->
                            <tr>
                                <td colspan="3" class="loading">正在加载数据...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 题材涨幅排名 -->
            <div class="module">
                <div class="module-header">
                    <div class="module-title">题材涨幅排名</div>
                    <div class="module-filter">8%以上</div>
                </div>
                <div class="table-container">
                    <table id="theme-rise-table">
                        <thead>
                            <tr>
                                <th>题材</th>
                                <th>涨幅排名</th>
                                <th>上榜个数</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 数据将通过AJAX动态加载 -->
                            <tr>
                                <td colspan="3" class="loading">正在加载数据...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 题材涨速排名 -->
            <div class="module">
                <div class="module-header">
                    <div class="module-title">题材涨速排名</div>
                    <div class="module-filter">>3分转深</div>
                </div>
                <div class="table-container">
                    <table id="theme-speed-table">
                        <thead>
                            <tr>
                                <th>题材</th>
                                <th>涨速排名</th>
                                <th>上榜个数</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 数据将通过AJAX动态加载 -->
                            <tr>
                                <td colspan="3" class="loading">正在加载数据...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 股票量比榜 -->
            <div class="module">
                <div class="module-header">
                    <div class="module-title">股票量比榜</div>
                    <div class="module-filter">2以上</div>
                </div>
                <div class="table-container">
                    <table id="volume-ratio-table">
                        <thead>
                            <tr>
                                <th>题材</th>
                                <th>量比排名</th>
                                <th>上榜个数</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 数据将通过AJAX动态加载 -->
                            <tr>
                                <td colspan="3" class="loading">正在加载数据...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 机会序列 -->
            <div class="module">
                <div class="module-header">
                    <div class="module-title">机会序列</div>
                    <div class="module-filter">总仓位：100万</div>
                </div>
                <div class="table-container">
                    <table id="opportunity-table">
                        <thead>
                            <tr>
                                <th>股票</th>
                                <th>仓位占比</th>
                                <th>参考金额</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 数据将通过AJAX动态加载 -->
                            <tr>
                                <td colspan="3" class="loading">暂无数据</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- 电力-核电板块 -->
        <div class="sector-table">
            <div class="sector-header">
                <div class="sector-title">电力-核电</div>
                <button class="add-btn">+ 添加板块</button>
            </div>
            
            <!-- 电力-核电表格特殊布局 -->
            <div class="power-nuclear-table-container">
                <!-- 固定列：股票代码、股票公司、实时涨幅 -->
                <div class="power-nuclear-fixed-columns">
                    <table>
                        <thead>
                            <tr>
                                <th>股票代码</th>
                                <th>股票公司</th>
                                <th>实时涨幅</th>
                            </tr>
                        </thead>
                        <tbody id="power-nuclear-fixed-body">
                            <!-- 固定列数据将通过AJAX动态加载 -->
                            <tr>
                                <td colspan="3" class="loading">正在加载数据...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 可滚动日期列 -->
                <div class="power-nuclear-scrollable-dates">
                    <table>
                        <thead>
                            <tr>
                                <th>10月17日</th>
                                <th>10月18日</th>
                                <th>10月19日</th>
                                <th>10月20日</th>
                                <th>10月21日</th>
                                <th>10月22日</th>
                                <th>10月23日</th>
                                <th>10月24日</th>
                                <th>10月25日</th>
                                <th>10月26日</th>
                                <th>10月27日</th>
                                <th>10月28日</th>
                                <th>10月29日</th>
                                <th>10月30日</th>
                                <th>10月31日</th>
                                <th>11月1日</th>
                                <th>11月2日</th>
                                <th>11月3日</th>
                            </tr>
                        </thead>
                        <tbody id="power-nuclear-scrollable-body">
                            <!-- 日期列数据将通过AJAX动态加载 -->
                            <tr>
                                <td colspan="18" class="loading">正在加载数据...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="action-bar">
                <button class="download-btn">一键下载</button>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 模拟数据
        const mockData = {
            // 股票涨跌榜
            riseFall: [
                {code: "000001", name: "中国长城", theme: "国产操作系统", rise: "29%"},
                {code: "000002", name: "中国软件", theme: "国产操作系统", rise: "25%"},
                {code: "000003", name: "药明康德", theme: "创制药", rise: "19%"},
                {code: "000004", name: "迪光电子", theme: "芯片", rise: "18%"},
                {code: "000005", name: "赛沃纪", theme: "芯片", rise: "15%"},
                {code: "000006", name: "中芯国际", theme: "芯片", rise: "10%"}
            ],
            
            // 股票涨速榜
            riseSpeed: [
                {code: "600001", name: "XXXX", theme: "芯片", rise: "5.2%"},
                {code: "600002", name: "YYYY", theme: "国产操作系统", rise: "4.8%"},
                {code: "600003", name: "ZZZZ", theme: "创制药", rise: "4.5%"},
                {code: "600004", name: "AAAA", theme: "锂电池", rise: "4.2%"},
                {code: "600005", name: "BBBB", theme: "人工智能", rise: "3.9%"}
            ],
            
            // 题材涨幅排名
            themeRise: [
                {name: "芯片", rank: 1, count: 9},
                {name: "国产操作系统", rank: 2, count: 7},
                {name: "创制药", rank: 3, count: 5},
                {name: "锂电池", rank: 4, count: 4},
                {name: "人工智能", rank: 5, count: 3}
            ],
            
            // 题材涨速排名
            themeSpeed: [
                {name: "芯片", rank: 1, count: 9},
                {name: "国产操作系统", rank: 2, count: 7},
                {name: "创制药", rank: 3, count: 5},
                {name: "锂电池", rank: 4, count: 4},
                {name: "人工智能", rank: 5, count: 3}
            ],
            
            // 股票量比榜
            volumeRatio: [
                {name: "芯片", rank: 1, count: 9},
                {name: "国产操作系统", rank: 2, count: 7},
                {name: "创制药", rank: 3, count: 5},
                {name: "锂电池", rank: 4, count: 4},
                {name: "人工智能", rank: 5, count: 3}
            ],
            
            // 机会序列
            opportunity: [
                {name: "中国长城", ratio: "25%", amount: "25万"},
                {name: "中国软件", ratio: "25%", amount: "25万"},
                {name: "迪光电子", ratio: "23%", amount: "25万"},
                {name: "XXXX", ratio: "15%", amount: "15万"},
                {name: "YYYY", ratio: "12%", amount: "12万"}
            ],
            
            // 电力-核电板块 - 增加更多日期数据
            powerNuclear: [
                {code: "600100", name: "电力股份", currentRise: "8.5%", 
                 dates: ["+2.1%", "+3.5%", "-1.2%", "+4.3%", "+8.5%", "+1.2%", "+2.4%", "-0.8%", 
                         "+3.1%", "+5.7%", "+0.9%", "+2.8%", "-1.5%", "+4.2%", "+7.3%", "+1.5%", "+3.2%", "+0.5%"]},
                {code: "600101", name: "核电科技", currentRise: "7.2%", 
                 dates: ["+1.8%", "+2.7%", "+0.5%", "+3.9%", "+7.2%", "+0.7%", "+1.9%", "-0.3%", 
                         "+2.8%", "+4.6%", "+1.1%", "+2.3%", "-0.9%", "+3.5%", "+6.1%", "+1.2%", "+2.8%", "+0.3%"]},
                {code: "600102", name: "能源发展", currentRise: "6.8%", 
                 dates: ["+0.9%", "+1.5%", "+2.3%", "+4.1%", "+6.8%", "+1.3%", "+2.1%", "-0.5%", 
                         "+3.2%", "+5.4%", "+0.8%", "+1.7%", "-1.2%", "+2.9%", "+4.8%", "+1.1%", "+2.5%", "+0.2%"]},
                {code: "600103", name: "清洁能源", currentRise: "5.9%", 
                 dates: ["-0.5%", "+1.2%", "+2.8%", "+3.5%", "+5.9%", "+0.6%", "+1.4%", "-0.7%", 
                         "+2.5%", "+4.3%", "+0.9%", "+1.8%", "-1.1%", "+3.0%", "+5.2%", "+1.0%", "+2.3%", "+0.4%"]},
                {code: "600104", name: "电力设备", currentRise: "5.3%", 
                 dates: ["+0.3%", "+1.8%", "+2.5%", "+3.2%", "+5.3%", "+0.5%", "+1.2%", "-0.4%", 
                         "+2.1%", "+3.8%", "+0.7%", "+1.5%", "-0.8%", "+2.4%", "+4.1%", "+0.9%", "+2.1%", "+0.1%"]}
            ]
        };

        // 渲染表格数据
        function renderTableData(tableId, data, columns) {
            const tableBody = $(`#${tableId} tbody`);
            tableBody.empty();
            
            if (data.length === 0) {
                tableBody.append('<tr><td colspan="' + columns.length + '" class="loading">暂无数据</td></tr>');
                return;
            }
            
            data.forEach(function(item) {
                const row = $('<tr class="stock-item"></tr>');
                
                columns.forEach(function(column) {
                    if (column === 'code') {
                        row.append('<td class="stock-code">' + item[column] + '</td>');
                    } else if (column === 'name') {
                        row.append('<td class="stock-name">' + item[column] + '</td>');
                    } else if (column === 'theme') {
                        row.append('<td class="theme-name">' + item[column] + '</td>');
                    } else if (column === 'rise' || column === 'currentRise') {
                        const value = item[column];
                        const isRise = value.startsWith('+') || (!value.startsWith('-') && parseFloat(value) >= 0);
                        const className = isRise ? 'stock-rise' : 'stock-fall';
                        row.append('<td class="' + className + '">' + value + '</td>');
                    } else {
                        row.append('<td>' + item[column] + '</td>');
                    }
                });
                
                tableBody.append(row);
            });
        }

        // 渲染电力-核电表格
        function renderPowerNuclearTable() {
            const fixedBody = $('#power-nuclear-fixed-body');
            const scrollableBody = $('#power-nuclear-scrollable-body');
            
            fixedBody.empty();
            scrollableBody.empty();
            
            if (mockData.powerNuclear.length === 0) {
                fixedBody.append('<tr><td colspan="3" class="loading">暂无数据</td></tr>');
                scrollableBody.append('<tr><td colspan="18" class="loading">暂无数据</td></tr>');
                return;
            }
            
            mockData.powerNuclear.forEach(function(item) {
                // 固定列行
                const fixedRow = $('<tr class="stock-item"></tr>');
                fixedRow.append('<td class="stock-code">' + item.code + '</td>');
                fixedRow.append('<td class="stock-name">' + item.name + '</td>');
                
                const isRise = item.currentRise.startsWith('+') || (!item.currentRise.startsWith('-') && parseFloat(item.currentRise) >= 0);
                const className = isRise ? 'stock-rise' : 'stock-fall';
                fixedRow.append('<td class="' + className + '">' + item.currentRise + '</td>');
                
                fixedBody.append(fixedRow);
                
                // 日期列行
                const scrollableRow = $('<tr class="stock-item"></tr>');
                
                item.dates.forEach(function(date) {
                    const isDateRise = date.startsWith('+') || (!date.startsWith('-') && parseFloat(date) >= 0);
                    const dateClassName = isDateRise ? 'stock-rise' : 'stock-fall';
                    scrollableRow.append('<td class="' + dateClassName + '">' + date + '</td>');
                });
                
                scrollableBody.append(scrollableRow);
            });
        }

        $(function () {
            // 模拟AJAX请求
            setTimeout(function() {
                // 渲染股票涨跌榜
                renderTableData('rise-fall-table', mockData.riseFall, ['name', 'theme', 'rise']);
                
                // 渲染股票涨速榜
                renderTableData('rise-speed-table', mockData.riseSpeed, ['name', 'theme', 'rise']);
                
                // 渲染题材涨幅排名
                renderTableData('theme-rise-table', mockData.themeRise, ['name', 'rank', 'count']);
                
                // 渲染题材涨速排名
                renderTableData('theme-speed-table', mockData.themeSpeed, ['name', 'rank', 'count']);
                
                // 渲染股票量比榜
                renderTableData('volume-ratio-table', mockData.volumeRatio, ['name', 'rank', 'count']);
                
                // 渲染机会序列
                renderTableData('opportunity-table', mockData.opportunity, ['name', 'ratio', 'amount']);
                
                // 渲染电力-核电板块
                renderPowerNuclearTable();
            }, 500); // 模拟网络延迟
            
            // 添加点击股票到机会序列的功能
            $(document).on('click', '.stock-item', function() {
                const stockName = $(this).find('.stock-name').text();
                const stockCode = $(this).find('.stock-code').text();
                
                if (stockName && stockCode) {
                    // 添加到机会序列
                    const opportunityTable = $('#opportunity-table tbody');
                    
                    // 检查是否已经添加
                    let alreadyExists = false;
                    opportunityTable.find('tr').each(function() {
                        if ($(this).find('td:first').text() === stockName) {
                            alreadyExists = true;
                            return false;
                        }
                    });
                    
                    if (!alreadyExists) {
                        // 移除"暂无数据"行
                        if (opportunityTable.find('tr').length === 1 && opportunityTable.find('td').hasClass('loading')) {
                            opportunityTable.empty();
                        }
                        
                        // 添加新行
                        const newRow = $('<tr></tr>');
                        newRow.append('<td class="stock-name">' + stockName + '</td>');
                        
                        // 生成随机的仓位占比和参考金额
                        const ratio = (Math.floor(Math.random() * 20) + 10) + '%';
                        const amount = (Math.floor(Math.random() * 20) + 10) + '万';
                        newRow.append('<td>' + ratio + '</td>');
                        newRow.append('<td>' + amount + '</td>');
                        
                        opportunityTable.append(newRow);
                        
                        // 显示添加成功提示
                        alert('已将 ' + stockName + ' 添加到机会序列');
                    } else {
                        alert('该股票已在机会序列中');
                    }
                }
            });
            
            // 添加模块按钮点击事件
            $('.add-btn').on('click', function() {
                alert('添加模块功能开发中...');
            });
            
            // 一键下载按钮点击事件
            $('.download-btn').on('click', function() {
                alert('数据下载功能开发中...');
            });
        });
    </script>
</body>
</html>